<template>
    <div>
        <div class="row-style" id="header-charts" style="height: 300px"></div>
        <el-row class="row-style" :gutter="22">
            <el-header>
                <el-row>
                    <el-col :span="3" style="margin-top: 5px">
                        当前所选择的模块：
                    </el-col>
                    <el-col :span="4">
                        <el-select v-model="subsyetmChooseValue" filterable placeholder="请选择"
                                   @change="reflush" style="width: 100%;">
                            <el-option v-for="item in options" :key="item.key"
                                       :label="item.label" :value="item.key">
                                <span style="float: left">{{ item.key }}</span>
                                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                            </el-option>
                        </el-select>
                    </el-col>
                </el-row>
            </el-header>
            <el-col :span="8">
                <el-card>
                    <!-- 当日模块售销记录 -->
                    <div id="left-charts" class="charts-style"></div>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card>
                    <!-- 当日模块商品销售比 -->
                    <div id="center-charts" class="charts-style"></div>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card>
                    <!-- 当日模块商品销售量 -->
                    <div id="right-charts" class="charts-style"></div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import * as echarts from 'echarts';

    export default {
        name: "index",
        data(){
            return {
                // 头部的总销售额的图标对象
                headerCharts: null,
                // 模块左部对应的模块销售记录
                leftCharts: null,
                // 模块中间对应的商品销售比
                centerCharts: null,
                // 模块右边对应的商品销售量
                rightCharts: null,
                // 记录子系统所选的值
                subsyetmChooseValue: '',
                // 头部列表的数据
                options: [],
            }
        },
        methods:{
            // 查找对应账户的子服务器列表
            subsystemObtain: function () {
                let win = this;
                let form = new FormData;
                let user = JSON.parse(window.sessionStorage.getItem("user"));
                form.append("serve-account", user.userName);
                this.$http.post("/api/subsystem/obtain/stock", form).then(function (response) {
                    win.options = response.data;
                })
            },
            obtainHeaderTable(){
                // 显示标题，图例和空的坐标轴
                this.headerCharts = echarts.init(document.getElementById('header-charts'));
                let user = JSON.parse(window.sessionStorage.getItem("user"));
                let form = new FormData;
                let win = this;
                form.append("account", user.userName);
                this.$http.post("/api/history/obtain/account", form).then(function (response) {
                    if(response.data !== null){
                        win.headerCharts.setOption({
                            title: {
                                text: '账户最近七日总销售额'
                            },
                            tooltip: {},
                            legend: {

                            },
                            dataset:{
                                dimensions:[
                                    {name: 'createTime'},
                                    {name: 'coPrice'}
                                    ],
                                source:  response.data
                            },
                            xAxis: {
                                type: 'category',
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series:[
                                {name:'销售额',type: 'line'}
                            ]
                        });
                    }
                })
            },
            reflush(){
                this.obtainLeftCharts(this.subsyetmChooseValue);
                this.obtainCenterCharts(this.subsyetmChooseValue);
                this.obtainRightCharts(this.subsyetmChooseValue);
            },
            obtainLeftCharts(serverCode){
                // 显示标题，图例和空的坐标轴
                this.leftCharts = echarts.init(document.getElementById('left-charts'));
                let user = JSON.parse(window.sessionStorage.getItem("user"));
                let form = new FormData;
                let win = this;
                form.append("account", user.userName);
                form.append("server-code", serverCode);
                this.$http.post("/api/history/obtain/history/line", form).then(function (response) {
                    if(response.data !== null){
                        win.leftCharts.setOption({
                            title: {
                                text:'最近模块售销记录'
                            },
                            tooltip: {},
                            legend: {
                                top: 'bottom'
                            },
                            dataset:{
                                dimensions:[
                                    {name: 'createTime'},
                                    {name: 'coPrice'},{name:'coStock'}, {name:'coInput'}
                                ],
                                source:  response.data
                            },
                            xAxis: {
                                type: 'category',
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series:[
                                {name:'销售额',type: 'line'},
                                {name:'销售量',type: 'line'},
                                {name:'进货量',type: 'line'},
                            ]
                        });
                    }
                })
            },
            obtainCenterCharts(serverCode){
                this.centerCharts = echarts.init(document.getElementById('center-charts'));
                let user = JSON.parse(window.sessionStorage.getItem("user"));
                let form = new FormData;
                let win = this;
                form.append("account", user.userName);
                form.append("server-code", serverCode);
                this.$http.post("/api/history/obtain/history/stock", form).then(function (response) {
                    if(response.data !== null){
                        win.centerCharts.setOption({
                            title:{
                              text:'商品销售量比例',
                            },
                            legend: {
                                top: 'bottom'
                            },
                            dataset:{
                                dimensions:[
                                    {name: 'name'},
                                    {name: 'value'}
                                ],
                            },
                            toolbox: {
                                show: true,
                                feature: {
                                    mark: {show: true},
                                    dataView: {show: true, readOnly: false},
                                    restore: {show: true},
                                    saveAsImage: {show: true}
                                }
                            },
                            series: [
                                {
                                    name: '面积模式',
                                    type: 'pie',
                                    radius: [20, 100],
                                    center: ['50%', '50%'],
                                    roseType: 'area',
                                    itemStyle: {
                                        borderRadius: 8
                                    },
                                    data: response.data,
                                }
                            ]
                        });
                    }
                });
            },
            obtainRightCharts(serverCode){
                this.rightCharts = echarts.init(document.getElementById('right-charts'));
                let user = JSON.parse(window.sessionStorage.getItem("user"));
                let form = new FormData;
                let win = this;
                form.append("account", user.userName);
                form.append("server-code", serverCode);
                this.$http.post("/api/history/obtain/history/price", form).then(function (response) {
                    if (response.data !== null){
                        win.rightCharts.setOption({
                            title:{
                                text:'商品销售额'
                            },
                            legend: {
                                top: 'bottom'
                            },
                            dataset:{
                                dimensions: [{name : 'name'},{name:'value'  }],
                                source:response.data,
                            },
                            xAxis: {
                                type: 'category'
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [{type: 'bar'}]
                        });
                    }
                });
            }
        },
        mounted() {
                this.obtainHeaderTable();
                this.subsystemObtain();
                this.reflush();
        }
    }
</script>

<style scoped>
    .row-style{
        width: 100%;
    }
    .charts-style{
        width: 100%;
        height: 300px;
    }
</style>
